<html>
<head>
   <title>LibDraw Test Page</title>
   <!-- Dependencies -->
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
   <script type="text/javascript" src="lib/template.js"></script>
   <script type="text/javascript">__LIBDRAW_DEBUG__ = true;</script>
   <!-- libDraw includes -->
   <link type="text/css" rel="stylesheet" href="css/libdraw.css"/>
   <script type="text/javascript" src="libdraw.js"></script>
   
   <script type="text/javascript" src="extensions/drawables.js"></script>
    <script type="text/javascript" src="extensions/ngl.js"></script>
   
   <!-- simple example here-->
   <script type="text/javascript">
      $(document).ready(function(){
         // get the CANVAS element
         var canvasEl = document.getElementById('content-canvas-1');
         // create libdraw Runtme
         var ldrt = rt = new libdraw.Runtime({
            canvas: canvasEl,
            fps: 24,
            width: 300,
            height: 300
         });
         
         // setup the runtime
         ldrt.setup(function(){
               this.size(300,300);
               this.x = 150;
               this.y = 150;
               this.nx = 150;
               this.ny = 150;
               this.accf = 8;
               this.radius = 40;
               
               this.r1 = 70;
               this.r2 = 80;
               this.r3 = 85;
               this.r4 = 75;
               
               this.clr = [0,255,0];
               this.ec = 0;
               this.background(170,170,170);
         });
         
        
         ldrt.exec(function(){
            with(this){
               strokeSize(7);
               stroke(255,255,255);
               fill(clr[0],clr[1],clr[2]);
               x -= (x-nx)/accf;
               y -= (y-ny)/accf;
               
               radius+=Math.sin(frame/4);
               circle(x,y,radius);
               
               strokeSize(0);
               
               
               
               fill(0,0,255);
               circle(x + (r1*Math.cos(millis()/300)), y + (r1*Math.sin(millis()/300)), 5);
               fill(255,255,0);
               circle(x - (r2*Math.cos(millis()/250)), y - (r2*Math.sin(millis()/250)), 5);
               
               fill(255,0,0);
               circle(x + (r3*Math.sin(millis()/200)), y + (r3*Math.cos(millis()/200)), 5);
               fill(0,255,0);
               circle(x - (r4*Math.sin(millis()/300)), y - (r4*Math.cos(millis()/300)), 5);
               
               
               r1+=Math.sin(frame/16);
               r2+=Math.cos(frame/20);
               r3+=Math.sin(millis()/600);
               r4+=Math.cos(millis()/400);
               
               for(var i = 0; i < 3; i++){
                  if(clr[i] == 255){
                     ec = i;
                     break;
                  }
               }
               
               clr[ec] = clr[ec]-1;
               clr[(ec+1)%3] = clr[(ec+1)%3]+1;
               
            }
         });

         
         ldrt.mouseMove = function(){
            with(this){
               nx = mouseX;
               ny = mouseY;
            }
         };
         
         // initialize the runtime
         ldrt.init();
         
         // start the rendering
         ldrt.start();
         
         // let's show the frame rate :)
         ldrt.showFps(true);
      });
   </script>
   
   <style>
      h1{
         font: bold 18px sans-serif;
         border-top: solid 1px #4999ff;
         margin: 15px;
         padding: 5px;
         background:url(images/back-01.png) repeat-x;
      }
      .canvas-wrapper{
         border: 1px solid #4999ff;
         padding: 3px;
         width: 300px;
      }
      h2{
         font: bold 14px sans-serif;
         color: #1555aa;
      }
      p{
       font: 12px sans;
      }
      pre{
         border: solid 1px #1555aa;
         background-color: #cfdfff;/*#ddeeff;*/
         padding: 10px;
      }
   </style>
   
   
</head>
<body style="background-color: #f2f2f2;">
   <h1>LibDraw - JavaScript graphics library</h1>
   <div style="margin: 15px;">
      
      <div class="canvas-wrapper" style="float: right;">
         <canvas id="content-canvas-1"></canvas>
      </div>
      <p>
         <b>LibDraw</b> is a JavaScript library for graphics, animation and web interaction 
         for those who want to do this without Java applets and Flash.<br/>
         It depends primarily on HTML 5 and uses the CANVAS element - 
         so all you need is brower that supports it.<br/>
         
         You'll need some basic knowledge of JavaScript 
         (really just the basics are enough - nothing fancy), 
         LibDraw itself and you're ready to go.
      </p>
      <h2>Setting it up</h2>
      <p>
         You can get LibDraw <a href="http://code.google.com/p/libdraw/downloads/list">here</a>. 
         The source code is availible <a href="http://code.google.com/p/libdraw/source/checkout">here</a>.<br/>
         
         After unpacking the distribution package 
         (version 0.2 and above should contain some extensions and examples folder),
         you can add LibDraw to your page by including these files (just add this to the html HEAD):
         
      </p>
      <pre width="100%">
&lt;!-- Dependencies --&gt;
&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="lib/template.js"&gt;&lt;/script&gt;
&lt;!-- libDraw includes --&gt;
&lt;link type="text/css" rel="stylesheet" href="css/libdraw.css"/&gt;
&lt;script type="text/javascript" src="libdraw.js"&gt;&lt;/script&gt;   
      </pre>

      <p>
         To initialize the LibDraw Runtime with your canvas element, add the following lines:
         
         <pre width="100%">
   // get the CANVAS element
   var canvasEl = document.getElementById('content-canvas-1');
   
   // create libdraw Runtme
   var ldrt = rt = new libdraw.Runtime({
      canvas: canvasEl,
      fps: 24,          // frames per second
      width: 300,       // drawing canvas width
      height: 300       // drawing canvas height
   });
         </pre>
         
      </p>
      
      
      <h2>Drawing with LibDraw</h2>
      <p>
      LibDraw basically works with two funtions: <code>setup</code> and <code>exec</code>. 
      <code>setup</code> gets called only once, during the Runtime initialization - so all code that goes here is called and executed only once.
      <code>exec</code> on the other hand, is the where the actual drawing gets done. It gets called to draw each frame - so for a 30FPS animation
      it gets called 30 times per second.<br/>
      After you've added the lines of code as above and created your Runtime, you can add your <code>setup</code> and <code>exec</code>
      like this:
      
      <pre width="100%">
   // we're passing a callback to the setup of the LibDraw Runtime object
   ldrt.setup(function(){
      // initialization ode goes here. . .
   });
   
   // and we're passing a callback to the exec method of the LibDraw Runtime object as well
   ldrt.exec(function(){
      // drawing code goes here. . .
   });
      </pre>
      <p>
      After adding all of this - we need to start our runtime and see the results:
      </p>
      <pre width="100%">
         // initialize the runtime
         ldrt.init();
         
         // start the rendering
         ldrt.start();
      </pre>
      </p>
      
      <p>
      And here is the source code for the demo above:
      </p>
      <pre width="100%">
// get the CANVAS element
         var canvasEl = document.getElementById('content-canvas-1');
         
         // create libdraw Runtme
         var ldrt = rt = new libdraw.Runtime({
            canvas: canvasEl,
            fps: 24,
            width: 300,
            height: 300
         });
         
         // setup the runtime
         ldrt.setup(function(){
               this.size(300,300);
               this.x = 150;
               this.y = 150;
               this.nx = 150;
               this.ny = 150;
               this.accf = 8;
               this.radius = 40;
               
               this.r1 = 70;
               this.r2 = 80;
               this.r3 = 85;
               this.r4 = 75;
               
               this.clr = [0,255,0];
               this.ec = 0;
               this.background(170,170,170);
         });
         
        
         ldrt.exec(function(){
            with(this){
               strokeSize(7);
               stroke(255,255,255);
               fill(clr[0],clr[1],clr[2]);
               x -= (x-nx)/accf;
               y -= (y-ny)/accf;
               
               radius+=Math.sin(frame/4);
               circle(x,y,radius);
               
               strokeSize(0);
               
               
               
               fill(0,0,255);
               circle(x + (r1*Math.cos(millis()/300)), y + (r1*Math.sin(millis()/300)), 5);
               fill(255,255,0);
               circle(x - (r2*Math.cos(millis()/250)), y - (r2*Math.sin(millis()/250)), 5);
               
               fill(255,0,0);
               circle(x + (r3*Math.sin(millis()/200)), y + (r3*Math.cos(millis()/200)), 5);
               fill(0,255,0);
               circle(x - (r4*Math.sin(millis()/300)), y - (r4*Math.cos(millis()/300)), 5);
               
               
               r1+=Math.sin(frame/16);
               r2+=Math.cos(frame/20);
               r3+=Math.sin(millis()/600);
               r4+=Math.cos(millis()/400);
               
               for(var i = 0; i < 3; i++){
                  if(clr[i] == 255){
                     ec = i;
                     break;
                  }
               }
               
               clr[ec] = clr[ec]-1;
               clr[(ec+1)%3] = clr[(ec+1)%3]+1;
               
            }
         });

         
         ldrt.mouseMove = function(){
            with(this){
               nx = mouseX;
               ny = mouseY;
            }
         };
         
         // initialize the runtime
         ldrt.init();
         
         // start the rendering
         ldrt.start();
         
         // let's show the frame rate :)
         ldrt.showFps(true);
      </pre>
      
      <p>You can also see the source if this page ;)</p>
      
      <h2>Documentation</h2>
      <p>
      For more doumentation - visit the LibDraw <a href="http://code.google.com/p/libdraw/w/list">wiki</a> on google-code.
      </p>
   </div>
</body>
</html>
